import React, { Component } from 'react';
import { Table, Pagination, Message, Dialog, Button, Balloon, Grid } from '@alifd/next';
import IceContainer from '@icedesign/container';
import moment from 'moment';
import TableFilter from './TableFilter';
import { ApiOfEventPage, ApiOfEventRelase } from '#/utils/policyApiDefine'
import SearchTableWrapper from '#/hoc/SearchTableWrapper'

const { Row, Col } = Grid;

@SearchTableWrapper(ApiOfEventPage)
export default class SearchTable extends Component {
  static displayName = 'SearchTable';

  static propTypes = {};

  static defaultProps = {};

  constructor() {
    super();
    this.state = {
    };
  }
  onToggleStatusConfirm = (item) => {
    let that = this;
    let Api = item.status != 'UNFIXED' ? '' : ApiOfEventRelase;
    if (Api) {
      Dialog.confirm({
        title: '',
        content: '确认要' + (item.status != 'UNFIXED' ? '' : '解除告警事件') + '吗?',
        onOk: () => {

          Api(item.code).then(response => {
            that.props.fetch();
            Message.success('操作成功!');
          }).catch(function (error) {
            console.log(error);
          });
        }
      });
    }
  }

  renderPolicyType = (value, index, item) => {
    let policyType = item.policy.policyType;
    if (policyType === 'SYSTEM') {
      policyType = '系统告警';
    } else if (policyType === 'DEVICE_FAULT') {
      policyType = '设备故障告警';
    } else if (policyType === 'GATEWAY_DISCONNECT') {
      policyType = '通讯中断告警';
    } else if (policyType === 'POLICY_ALARM') {
      policyType = '策略告警';
    } else if (policyType === 'POLICY_COMPLEX') {
      policyType = '复杂策略告警';
    } else if (policyType === 'SUB_SYSTEM_ALARM') {
      policyType = '子系统告警';
    }
    return (
      <span>{policyType}</span>
    );
  }
  renderStatus = (value, index, item) => {
    let status = item.status;
    if (status === 'UNFIXED') {
      status = '告警';
    } else if (status === 'FIXED') {
      status = '解除';
    } else if (status === 'IGNORE') {
      status = '忽略';
    }
    return (
      <span>{status}</span>
    );
  }
  renderTime = time => {
    if (time) {
      return (
        <div>{moment(time).format('YYYY-MM-DD HH:mm:ss')}</div>
      );
    } else {
      return (
        <div></div>
      );
    }

  }
  // 渲染操作按钮示例
  renderOper = (value, index, item) => {
    let that = this;
    return (
      <div>
        <Button onClick={() => this.onToggleStatusConfirm(item)} type="primary" text style={{ color: (item.status != 'UNFIXED') ? '#ff3000' : '#2874D1' }}>{item.status != 'UNFIXED' ? '' : '解除告警事件'}</Button>
      </div>
    );
  }
  render() {
    const { instances } = this.props.bindingData;
    return (

      <IceContainer style={this.props.styles.container}>
        <TableFilter
          filter={this.props.filter}
          match={this.props.match}
        />
         <Row wrap gutter="20" style={styles.formRow}>
          <Col l="8">
          </Col>
          <Col l="16">
            <Pagination
              style={this.props.styles.pagination}
              shape="arrow-only"
              pageSizeSelector="filter"
              current={this.props.page}
              total={instances.pageable.totalElements}
              totalRender={total => `总数: ${total}`}
              pageSize={instances.pageable.size}
              onChange={this.props.handlePaginationChange}
              onPageSizeChange={this.props.handlePageSizeChange}
            />
          </Col>
        </Row>
        <Table
          dataSource={instances.data}
          loading={this.props.loading}
          hasBorder={false}
          style={{ padding: '0 20px 20px' }}
          onSort={this.props.handleSort}
        >
          <Table.Column width={100} title="事件类型" dataIndex="policy.policyType" sortable={true} cell={this.renderPolicyType} />
          <Table.Column width={60} title="事件状态" dataIndex="status" cell={this.renderStatus} />
          {/* <Table.Column width={80} title="触发次数" dataIndex="count" /> */}
          <Table.Column width={120} title="最近发生时间" dataIndex="lastTime" cell={this.renderTime} />
          <Table.Column width={120} title="事件解除时间" dataIndex="fixTime" cell={this.renderTime} sortable={true} />
          <Table.Column width={140} title="事件内容" dataIndex="content" />
          <Table.Column width={100} title="资源编码" dataIndex="resourceCode" />
          <Table.Column width={100} title="策略编码" dataIndex="policy.code" />
          <Table.Column width={100} title="指标编码" dataIndex="metricCode" />
          <Table.Column
            width={80}
            title="操作"
            cell={this.renderOper}
          />
        </Table>
        <Pagination
          style={this.props.styles.pagination}
          shape="arrow-only"
          pageSizeSelector="filter"
          current={this.props.page}
          total={instances.pageable.totalElements}
          totalRender={total => `总数: ${total}`}
          pageSize={instances.pageable.size}
          onChange={this.props.handlePaginationChange}
          onPageSizeChange={this.props.handlePageSizeChange}
        />
      </IceContainer>
    );
  }
}

const styles = {
  formRow: {
    padding: '10px 20px',
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
};
